<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>大风车</title>
        <script src="../js/jquery-1.11.1.js"></script>
        <style>
            .imga{
                animation: dfc .8s linear infinite;
            }
            /* 关键帧 */
            @keyframes dfc{
                0%{
                    transform: translate(20px) rotate(180deg);
                }
                30%{
                    transform: translate(360px) rotate(360deg);
                }
                100%{
                    transform: translate(1500px) rotate(720deg);
                }
            }
            .imgb{
                animation: dfc1 .8s linear infinite;
            }
            @keyframes dfc1{
                0%{
                    transform: translate(20px) rotateX(180deg);
                }
                30%{
                    transform: translate(180px) rotateX(360deg);
                }
                100%{
                    transform: translate(1000px) rotateX(720deg);
                }
            }
        </style>
    </head>
    <body>
        <img src="../img/t1.gif" alt="1" />
        <audio src="../img/adafengche.mp3" autoplay></audio>
        <button class="btn1">开始</button>
        <button class="btn2">暂停</button>
        <button class="btn3">翻转</button>
        <script>
            // 点击   开转  图片切换并且添加样式  .imga
            $(".btn1").click(function(){
                $("img").attr("src","../img/adfc.jpg").toggleClass("imga");
                $("audio").attr("src","../img/adafengche.mp3");
            });
            // 暂停   音乐消失+动画效果消失？
            $(".btn2").click(function(){
                $("img").attr("src","../img/adfc.jpg").removeClass("imga").removeClass("imgb");
                $("audio").removeAttr("src")
            });
            // 翻转   切换 ：imga 切换 imgb
            $(".btn3").click(function(){
                $("img").attr("src","../img/adfc.jpg").toggleClass("imgb");
                $("audio").attr("src","../img/adafengche.mp3");
            });
        </script>
    </body>
</html>